1import { Suspense } from "react";
2import { getRepositoryCommitDiffs } from "@/lib/dal";
3import { DiffBody } from "./diff-body";
4import { DiffFileClient } from "./diff-file-client";
5
6/**
7 * we do the optional suspense to avoid the "loading" flicker for short loads, in which case
8 * we just block the original page load instead.
9 */
10export async function CommitBody({
11  owner,
12  repo,
13  sha,
14  useSuspense,
15}: {
16  owner: string;
17  repo: string;
18  sha: string;
19  useSuspense: boolean;
20}) {
21  return useSuspense ? (
22    <CommitSuspense>
23      <CommitBodyContent owner={owner} repo={repo} sha={sha} />
24    </CommitSuspense>
25  ) : (
26    <CommitBodyContent owner={owner} repo={repo} sha={sha} />
27  );
28}
29
30async function CommitBodyContent({
31  owner,
32  repo,
33  sha,
34}: {
35  owner: string;
36  repo: string;
37  sha: string;
38}) {
39  const commitDiffs = await getRepositoryCommitDiffs(owner, repo, sha);
40  if (!commitDiffs) return null;
41  const { diffs } = commitDiffs;
42
43  return (
44    <div className="flex flex-col">
45      {diffs.slice(0, 3).map((diff) => {
46        const key = diff.left?.path || diff.right?.path;
47        return (
48          <DiffFileClient
49            key={key}
50            leftPath={diff.left?.path}
51            rightPath={diff.right?.path}
52            linesAdded={diff.lines_added}
53            linesRemoved={diff.lines_removed}
54          >
55            <DiffBody diff={diff} />
56          </DiffFileClient>
57        );
58      })}
59      {/* also use suspense to render large lists in two blocks, first three files for atf, and then after for btf */}
60      <CommitSuspense>
61        {diffs.slice(3).map((diff) => {
62          const key = diff.left?.path || diff.right?.path;
63          return (
64            <DiffFileClient
65              key={key}
66              leftPath={diff.left?.path}
67              rightPath={diff.right?.path}
68              linesAdded={diff.lines_added}
69              linesRemoved={diff.lines_removed}
70            >
71              <DiffBody diff={diff} />
72            </DiffFileClient>
73          );
74        })}
75      </CommitSuspense>
76    </div>
77  );
78}
79
80function CommitSuspense({ children }: { children: React.ReactNode }) {
81  return (
82    <Suspense
83      fallback={
84        // match padding of diff header to avoid layout shift
85        <div className="flex flex-row w-full h-9 shrink-0 items-center p-2 font-mono text-sm text-muted-foreground">
86          loading...
87        </div>
88      }
89    >
90      {children}
91    </Suspense>
92  );
93}
94